<template>
    <div class="box" v-if="it">
        <div class="ti">近期最受期待</div>
        <ul>
            <li v-for="(item,index) in it"
            :key="index"
             @click="tiao(item.id)"
            >
                <div class="box1">
                    <img :src="item.img" alt="">
                    <div class="fen" v-if="item.wish" >{{item.wish}} 想看</div>
                    <div class="fen" v-if="!item.wish"> 暂无评分</div>
                </div>
                <div class="myName">{{item.nm}}</div>
                <div class="time">{{item.comingTitle}}</div>
                <div class="line"></div>
            </li>
        </ul>
       <my-list ></my-list>
    </div>
</template>
<script>
import myList from'../xuanXiangka/03List.vue';
export default {
    components:{
        myList
    },
    
    data(){
        return{
            it:null,//近期电影数据
            arr:null,
        }
    },
    props:{
      
    },
    methods:{
         tiao(a){
    //   // console.log(a);
    //   this.$router.go({name:'XiangQing',params:{id:a}})
    //   console.log(a)
            },
        // 近期最受期待
     async pm(){
       let re = await this.axios.get("index/mostExpected?ci=1&limit=10&offset=0").catch(err=>{
      console.log(err);
    })
    
    this.it =re.data.coming
    // console.log(this.it);
    
    },
    async rm(){
       let re = await this.axios.get("https://apis.netstart.cn/maoyan/index/comingList?ci=1&limit=10").catch(err=>{
      console.log(err);
    })
    // console.log(re);
    // console.log(re.data.coming);
    this.arr = re.data.coming

    
    
    },
            
    },
    created(){
        this.pm()
        this.rm()
    }
    
}
</script>
<style lang="less" scoped>
.box{
    padding-bottom: 30px;
    border-radius: 0 0 5px 5px ;
    .ti{
        font-size: 15px;
        color: #333;
    }
    background-color: white;
    width: 100%;
    box-sizing: border-box;
    >ul{
        padding-bottom: 10px;
        border-bottom: 1px solid #f0f0f0;
        width: 100%;
        box-sizing: border-box;
        color: red;
        display: flex;
        overflow-x: auto;
         &::-webkit-scrollbar {
           display: none;
          }

        >li{
            width: 96px;
            .line{
                width: 100%;
                height: 2px;
            }
             &:nth-child(odd){
                .line{
                     background-color: #ec6060;
                    
                        }

                }
                  &:nth-child(even){
                .line{
                     background-color: #00bfff;

                    
                        }

                }
            margin: 5px;
            .box1{
                position: relative;
                width: 96px;
                height: 134px;
                .fen{
                    width: 100%;
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    font-size: 10px;
                    color: #faaf00;
                    background-color: rgba(0,9,0,.4);
                }
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            .myName{
                width: 100%;
                box-sizing: border-box;
               overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                font-size: 15px;
                color: black;
                font-weight: 800;
            }
            .time{
                font-size: 10px;
                color: #666;
            }
           
        }
    }
    .box2{
        margin-top: 10px;
        >ul{
            >li{
                display: flex;
                .box3{
                    width: 64px;
                    height: 90px;
                    img{
                        width: 100%;
                        height: 100%;

                    }
                }
                .box-tite{

                }
            }
        }
    }
}
</style>